<template>
  <div class="me">
    <div class="header flex_start">
      <div class="user_pic">
        <img :src="img">
        <div class="text">
          <span class="text_name">{{name}}</span>
          <span class="text_content">签名：{{signature}}</span>
        </div>
      </div>
      <van-button type="danger" size="small" style="float: right;">取消关注</van-button>
    </div>
    <div class="massage flex_around">
      <div>粉丝{{fansNum}}人</div>
      <div>获赞{{zan}}个</div>
      <div>认证{{isCertification}}</div>
    </div>
    <div class="title flex_space">
      <div class="mix_title">他的发布（107条）</div>
      <div class="flex_start">
        <span class="min_font">更多</span>
        <van-icon name="arrow" size="15"></van-icon>
      </div>
    </div>
    <router-link to="/release">
      <div class="panel-list" v-for="item in  list " :key="item.id">
        <div class="card_header">
          <div class="flex_start">
            <div>{{item.title}}</div>
          </div>
          <img v-if="item.img" :src="item.img" width="100" height="50">
        </div>
        <div class="card_header">
          <div class="min_size">发帖时间：{{item.time}}</div>
          <div class="min_size flex_start">
            <span>浏览{{item.browseNum}}人</span>
            <span>评论{{item.reviewNum}}人</span>
          </div>
        </div>
      </div>
    </router-link>
  </div>
</template>
<script>
import { Icon, Button } from 'vant'
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  data() {
    return {
      img:
        'https://img.52z.com/upload/news/image/20180129/20180129092451_31905.jpg',
      name: '萌萌哒',
      signature: '世间无论什么都很优秀',
      fansNum: 999,
      zan: 100,
      isCertification: '无',
      friends: 111,
      circle: 22,
      topic: 222,
      ground: 111,
      list: [
        {
          id: '0',
          title: '大多数人们喜欢的户型有哪些?',
          time: '2019年5月14日',
          img:
            'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D790/sign=1cf755a396ef76c6d0d2f922ad17fdf6/b03533fa828ba61e51f94fad4734970a304e5919.jpg',
          browseNum: 50,
          reviewNum: 20,
          totalAll: 666
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.me {
  background-color: #fff;
  padding: 10px 10px;
  box-sizing: border-box;
  .header {
    margin-top: 5px;
    margin-bottom: 5px;

    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    .text {
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      .text_name {
        font-size: 14px;
        display: inline-block;
      }
      .text_content {
        font-size: 12px;
        color: #e5e5e5;
      }
    }
  }
  .massage {
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .Focus {
    margin-top: 5px;
    margin-bottom: 10px;
    .van-icon {
      margin-left: 10px;
    }
  }
  .title {
    .min_title {
      font-size: 14px;
    }
    .min_font {
      font-size: 12px;
    }
  }
  .panel-list {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    padding: 10px 10px;
    box-sizing: border-box;
    .card_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .card_footer {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      font-size: 14px;
      padding: 10px 0;
      box-sizing: border-box;
      border-top: 1px solid #e5e5e5;
      margin-top: 5px;
    }
  }
  .footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
  }
}
.flex_space {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex_start {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .user_pic {
    display: flex;
    flex-grow: 1;
  }
}
.flex_around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.tip_title {
  font-size: 14px;
}
.size {
  font-size: 12px;
  text-align: center;
}
.min_size {
  font-size: 12px;
  color: #e5e5e5;
  margin-top: 5px;
}
a {
  color: #000;
}
</style>
